<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>版式照片生成</title>
    <link rel="stylesheet" href="../../../css/mui.min.css" />
    <script src="../../../js/mui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../css/app.css" />
    <link rel="stylesheet" href="../../../npl/css/vant.mini.css" />
    <script src="../../../js/jquery-3.6.0.min.js"></script>
    <script src="../../../js/flexible.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/sm2.js"></script>
    <script src="../../../js/sm3.js"></script>
    <script src="../../../js/clipboard.js"></script>
    <script src="../../../npl/js/vant.mini.js"></script>
    <script src="../../../js/vconsole.min.js"></script>
    <script src="../../text.js" type="text/javascript"></script>

    <link rel="stylesheet" href="../css/github-markdown.css" />
    <link rel="stylesheet" href="../css/idphoto.css" />

    <script src="../js/marked.min.js" type="text/javascript"></script>
    <script src="../js/turndown.js" type="text/javascript"></script>
    <script src="../js/util.js" type="text/javascript"></script>
    <script src="../js/stream.js"></script>
    <script src="../js/streamMsg.js"></script>
    <script src="../js/multiBtn.js"></script>

</head>

<body class="program-body">
    <div id="app" v-cloak>
        <multi-btn></multi-btn>
        <div class="is-loading">
            <div class="curtain">
                <div class="loadingBgc">
                    <div class="loader"></div>
                </div>
            </div>
        </div>
        <div class="trainTickets program-main" style="height: 100%">
            <div class="header_tit">
                <van-nav-bar :border=false left-arrow>
                    <template #title>
                        <span>版式照片生成</span>
                    </template>
                    <template #left>
                        <div class="back_l" @click="home()">
                            <img src="../../../image/left.png" alt="" />
                        </div>
                    </template>
                    <template #right>
                        <!-- <div class="share-mail"> -->
                            <div class="mail active-brightness" v-if="isResData" @click="sendMail(resData)">
                                <img src="../images/send-email.png" alt="" />
                            </div>
                            <div class="mail active-brightness" v-if="isResData" @click="syncToInner(resData)">
                                <img src="../images/sync.png" alt=""  />
                            </div>
                            <div class="share active-brightness" v-if="isResData" @click="share(resData)">
                                <img src="../images/share.png" alt=""  />
                            </div>
                            <div class="mail" v-if="!isResData">
                                <img src="../images/send-email.png" alt="" />
                            </div>
                            <div class="mail" v-if="!isResData">
                                <img src="../images/sync.png" alt="" />
                            </div>
                            <div class="share" v-if="!isResData">
                                <img src="../images/share.png" alt=""  />
                            </div>
                        <!-- </div> -->
                    </template>
                </van-nav-bar>
            </div>
            <!-- 主体 -->
            <div class="main">
                <!-- 照片显示区域 -->
                <div class="show">
                    <!-- 原始图 -->
                    <div class="show-left">
                        <img class="img-tip" src="../images/orgi.png"/>
                        <img class="img" :src="uploadImg">
                    </div>
                    <!-- 生成结果图 -->
                    <div class="show-right">
                        <img class="img-tip" src="../images/opt.png"/>
                        <img class="img" :src="resImg">
                    </div>
                </div>
                <!-- 上传按钮 -->
                <div class="upload-btn active-brightness">
                    <img src="../images/idphoto-upload.png" @click="uploadFunc()"/>
                    
                </div>
                <div class="upload-btn2 active-brightness">
                    <!-- 上传提示词 -->
                    <span class="prompt-class">上传10M以下单张人像图片</span>
                </div>
                <!-- 要求 -->
                <div class="requirement">
                    <div class="re-top">
                        <!-- 尺寸要求 -->
                        <div class="size-item">
                            <div class="title">选择尺寸规格</div>
                            <div class="re-scroll">
                                <div class="size-list" v-for="item in sizeList" :key="item.id" @click="selSize(item)">
                                    <div class="size-list-item">
                                        <img src="../images/size-selected.png" v-if="sizeItem && sizeItem.id == item.id"/>
                                        <div>
                                            {{item.title}}
                                        </div>
                                        <div class="desc">
                                            {{item.mmSize}}
                                        </div>
                                        <div class="desc">
                                            {{item.pxSize}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 背景色 -->
                         <div class="bg-item">
                            <div class="title">选择背景颜色</div>
                            <div class="re-scroll">
                                <div class="color-list" v-for="item in bgColorList" :key="item.id" @click="selBgColor(item)">
                                    <div class="color-list-item" :style="{background: item.colorStyle}">
                                        <img src="../images/select-white.png" v-if="bgColor == item.bgColor && bgColor != '#FFF' && bgColor != '#FFFFFF'"/>
                                        <img src="../images/select-black.png" v-if="bgColor == item.bgColor && (bgColor == '#FFF' || bgColor == '#FFFFFF')"/>
                                    </div>
                                </div>
                            </div>
                         </div>
                         <!-- 正装 -->
                        <div :class="['cloth-item']">
                            <div class="title">选择服装样式</div>
                            <div class="cloth-style">
                                <div @click="selClothStyle(0)" :class="[clothActive == 0 ? 'style-selected':'']">男装</div>
                                <div @click="selClothStyle(1)" :class="[clothActive == 1 ? 'style-selected':'']">女装</div>
                            </div>
                            <!-- 男装 -->
                            <div v-if="clothActive == 0">
                                <div class="re-scroll">
                                    <div class="cloth-list" v-for="item in manClothList" :key="item.id" @click="selCloth(item)">
                                        <div :class="['cloth-list-item',clothId == item.id ? 'cloth-selected':'']">
                                            <img class="cloth-logo" :src="item.imgData" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 女装 -->
                            <div v-if="clothActive == 1">
                                <div class="re-scroll">
                                    <div class="re-scroll">
                                        <div class="cloth-list" v-for="item in womanClothList" :key="item.id" @click="selCloth(item)">
                                            <div :class="['cloth-list-item',clothId == item.id ? 'cloth-selected':'']">
                                                <img class="cloth-logo" :src="item.imgData" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 生成按钮 -->
                    <div class="bottom">
                        <van-button class="submit-btn" @click="genIdPhoto()" v-if="isUploadImg">版式照片生成</van-button>
                        <van-button class="submit-btn" style="background-color: #ebebeb;color: #808080;" v-if="!isUploadImg" @click="genIdPhoto()">版式照片生成</van-button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/idphoto.js"></script>
</body>

</html>